<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:20px;">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>javaEE</el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button type="info" plain @click="dialogVisible = true">新建标签</el-button>
        <el-button type="info" plain @click="goAddlist">返回学科</el-button>
        <!-- 标签栏 -->
        <el-form label-width="80px" style="margin-top:10px;">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="标签名称">
                <el-input
                  v-model="queryInfo.tagName"
                  placeholder="请输入"
                  clearable
                  @clear="getTagsList"
                >
                  <el-button slot="append" icon="el-icon-search" @click="getTagsList"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 表格栏 -->
        <el-table :data="list">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="tagName" label="标签名称"></el-table-column>
          <el-table-column prop="username" label="创建者"></el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template slot-scope="scope">{{scope.row.addDate | parseTime}}</template>
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量"></el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
                <el-tag type="primary" v-if="scope.row.state == '1'">启用</el-tag>
                <el-tag type="danger" v-else>禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template class="caoz" slot-scope="scope">
              <el-link type="primary" @click="editDialogVisible(scope.row.id)">修改</el-link>
              <el-link type="primary">禁用</el-link>
              <el-link type="primary">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[1, 2, 4, 5]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
        ></el-pagination>
      </el-card>
      <!-- 新建标签弹框 -->
      <el-dialog title="新建标签" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
        <el-form label-width="80px">
          <el-form-item label="标签名称">
            <el-input placeholder="请输入" v-model="input" clearable></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改文件弹框 -->
      <el-dialog title="修改标签" :visible.sync="xiugai" width="50%" :before-close="handleClose">
        <el-form label-width="80px">
          <el-form-item label="标签名称">
            <el-input placeholder="请输入" v-model="input" clearable></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="xiugai= false">取 消</el-button>
          <el-button type="primary" @click="xiugai= false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { list } from '../../api/hmmm/tags.js'
import { update } from '../../api/hmmm/tags.js'
export default {
  name: 'TagsList',
  data() {
    return {
      dialogVisible: false,
      input: '',
      list: [],
      counts: 0,
      queryInfo: {
        tagName: '',
        pagesize: 5,
        page: 0
      },
      pages: 0,
      //用户信息
      xiugai: false,
      editForm: ''
    }
  },
  created() {
    this.getTagsList()
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 表格数据---------------
    async getTagsList() {
      const { data: res } = await list(this.queryInfo)
      console.log(res)
      this.list = res.items
      this.counts = res.counts
    },
    // 每一页条数切换--------
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.queryInfo.pagesize = val
      this.getTagsList()
    },
    //当前页数------------
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.queryInfo.page = val
      this.getTagsList()
    },
    goAddlist() {
      this.$router.push('/subjects/list')
    },
    // 修改数据-----------
    async editDialogVisible(id) {
      // console.log(id)
      this.xiugai = true
      //  const {data:res} = await update({id:id})
      //  this.editForm = res.data
    }
  }
}
</script>

<style scoped>
.caoz {
  margin-right: 10px;
}
</style>
